<template>
    <div id="course">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
            <el-form :inline="true" :model="ActData">
                <el-form-item>
                    <el-input type="number" min="0" v-model="ActData.id" placeholder="请输入要搜索的ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="ActData.name" placeholder="请输入要搜索的标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="postCourse">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--TAble-->
        <el-table :data="courseList" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column label="课程类型">
                <template slot-scope='scope'>
                    <p v-if="scope.row.type===0">课程</p>
                    <p v-else-if="scope.row.type===1">资讯</p>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="课程名称"></el-table-column>
            <el-table-column prop="mainImg" label='课程封面'>
                <template slot-scope='scope'>
                    <img v-if="scope.row.mainImg" :src='scope.row.mainImg.path'
                         class="mainImg">
                    <span v-else>暂未有图片</span>
                </template>
            </el-table-column>
            <el-table-column prop="teacher" label="讲师名称"></el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size"
                           :total="total" style="float:right;"></el-pagination>
        </el-col>
        <!--新增-->
        <el-dialog title="添加课程" v-model="addFormVisible">
            <div style="width: 100%;" class="clear">
                <el-row>
                    <el-col class="elCol" :span="40">
                        <el-table :data="course" border>
                            <el-table-column label="ID" width="100">
                                <template slot-scope="scope">
                                    <p v-text="scope.row.id"></p>
                                </template>
                            </el-table-column>
                            <el-table-column label="课程标题">
                                <template slot-scope="scope">
                                    <p v-text="scope.row.title"></p>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="tableDel(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-row class="el-ooo">
                    <el-col class="elCol" :span="18">
                        <el-select v-model="courseAdd" filterable placeholder="请选择" size="100%" :clearable="true"
                                   @visible-change="courseSize" @change="courseCli">
                            <el-option v-for="val in courseAddList" :key="val.id" :label="val.name"
                                       :value="val.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col class="elCol" :span="6">
                        <el-button class="addButton" @click="courseBot">添加课程</el-button>
                    </el-col>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addSubmit('addForm')" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import {marketCourseList, marketCourseAdd, marketCourseDelete, courseList} from '../../api/api';

    export default {
        data() {
            return {
                message: {},
                courseList: [],
                course: [],
                courseAdd: '',
                courseAddList: [],
                total: 0,
                page: 1,
                size: 5,
                ActData: {
                    id: null,
                    name: '',
                },
                listLoading: false,
                /*新增界面数据*/
                addFormVisible: false,
                addLoading: false,
                imageUrl: '',
                descImgUrl: '',
                addForm: [],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
            }
        },
        methods: {
            /*列表获取*/
            postCourse() {
                let para = {
                    page: this.page,
                    size: this.size,
                    data: this.ActData
                };
                this.listLoading = true;
                marketCourseList(para).then((res) => {
                    console.log(res);
                    this.listLoading = false;
                    this.courseList = res.data.content;
                    this.total = res.data.totalElements;
                });
            },
            /*分页*/
            selsChange: function (sels) {
                this.sels = sels;
            },
            handleCurrentChange(val) {
                this.page = val;
                this.postCourse();
            },
            /*新增*/
            handleAdd() {
                this.course=this.courseAddList=[];
                this.courseAdd = '';
                this.addFormVisible = true;
            },
            addSubmit(a) {
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.addLoading = true;
                    let para = {
                        cid : ''
                    };
                    for (let i=0;i<this.course.length;i++){
                        if(i===this.course.length-1){
                            para.cid += this.course[i].id+'';
                        }else{
                            para.cid += this.course[i].id+',';
                        }
                    }
                    marketCourseAdd(para).then((res) => {
                        console.log(res);
                        this.addLoading = false;
                        if (res.code !== 20000) {
                            this.$message({message: res.message, type: 'error'});
                        } else {
                            this.$message({message: res.message, type: 'success'});
                            this.addFormVisible = false;
                            this.postCourse();
                        }
                    });
                });

            },
            tableDel(val) {
                for (let i=0;i<this.course.length;i++){
                    if(this.course[i].id === val.id){
                        this.course.splice(i,1)
                    }
                }
            },
            //课程
            courseSize(fus) {
                if (fus) {
                    courseList({page: 1, size: 99999, data: {type: 0}}).then((res) => {
                        this.courseAddList = res.data.content;
                    });
                }
            },
            courseCli(fus){
                if(fus){
                    this.courseAdd = fus;
                }
            },
            courseBot() {
                if (this.course.length > 4) {
                    this.$message({message: '已有数据,未完成添加', type: 'error'});
                    return;
                }
                let obj = {};
                for (let j=0;j<this.courseAddList.length;j++){
                    if(this.courseAddList[j].id===this.courseAdd){
                        obj={
                            id : this.courseAddList[j].id,
                            name: this.courseAddList[j].name
                        }
                    }
                }
                if(JSON.stringify(obj) === '{}'){return}
                for (let i=0;i<this.course.length;i++){
                    if(this.course[i].id === obj.id){
                        this.$message({message: '已添加相同课程,请重新添加', type: 'error'});
                        return;
                    }
                }
                this.course.push({id:obj.id, title: obj.name});
            },

            /*删除*/
            handleDel(row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {id: row.id};
                    let id = row.id;
                    marketCourseDelete(id, para).then((res) => {
                        this.listLoading = false;
                        if (res.code !== 20000) {
                            this.$message({message: res.message, type: 'error'});
                        } else {
                            this.$message({message: res.message, type: 'success'});
                        }
                        this.postCourse();
                    });
                })
            },
        },
        mounted() {
            this.postCourse();
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #course {
        .mainImg {
            width: auto;
            height: 80px;
            padding: 10px 0;
            vertical-align: middle;
        }
        .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 182px;
            text-align: center;
            line-height: 1;
            &:hover {
                border-color: #20a0ff;
            }
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-ooo{
            margin: 20px 0 0;
            .el-col:nth-child(2){
                padding-left: 30px;
            }
        }
        .addButton{
            width: 100%;
        }
    }

    .clear {
        clear: both;
    }

    .clear:after {
        clear: both;
        content: ' ';
        display: block;
        font-size: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
        height: 0;
    }

    .clear {
        zoom: 1
    }
</style>